﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
  <head>
    <link rel="stylesheet" href="${ctx}/common/common.css" />
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

    <style>
      .layui-body {
        overflow-y: scroll;
      }
      .layui-input-block .layui-unselect {
        width: 100%;
      }
      .layui-form-item .layui-input-inline {
        width: 100%;
      }
    </style>
    <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
    <script src="${ctx}/common/plugins/layuiadmin/laydate/laydate.js"></script>
    <script src="${ctx}/common/plugins/layuiadmin/layui-xtree/layui-xtree.js"></script>
    <script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
  </head>
  <body>
    <!--主体内容层-->
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 layui-col-space15 layui-form">
          <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
              <li class="layui-this">生产批次查询</li>
              <li>溯源码查询</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                <!--输入框内容盒子-->
                <div class="layui-form-item">
                  <form action="">
                    <div class="layui-col-md12">
                      <div class="layui-col-md4">
                        <label class="layui-form-label">产品名称：</label>
                        <div class="layui-input-block">
                          <select name="quiz1" lay-filter="purNameChange" id="selectProductName">
                            <option value="">请选择产品</option>
                          </select>
                        </div>
                      </div>
                      <div class="layui-col-md4" style="display: flex; align-items: center">
                        <label class="layui-form-label">生产批次：</label>
                        <div class="layui-input-inline">
                          <div class="layui-form-select">
                            <div class="layui-select-title">
                              <input
                                id="batchCode"
                                type="text"
                                onchange="batchChange();"
                                onkeyup="assBatch(this);"
                                placeholder="请输入批次"
                                class="layui-input layui-unselect"
                              />
                              <input type="hidden" id="batchId" />
                            </div>
                            <dl class="layui-anim layui-anim-upbit batch-dl" id="dlBatch" style=""></dl>
                          </div>
                        </div>
                        <button
                          id="selectBatchCode"
                          type="button"
                          onclick="findBatchCode();"
                          class="layui-btn layui-btn-sm layui-btn-warm"
                        >
                          选择
                        </button>
                      </div>

                      <div class="layui-col-md4">
                        <label class="layui-form-label">生产日期：</label>
                        <div class="layui-input-block">
                          <select name="quiz3" id="selectPDate">
                            <option value="">请选择生产日期</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-md12" style="margin-top: 20px">
                      <div class="layui-col-md5">
                        <div class="layui-input-block">
                          <input type="hidden" id="productionCompanyId" />
                          <button type="button" class="layui-btn layui-btn-warm" id="prodictionButton">生产企业</button>
                          <span style="color: red; overflow-x: hidden" id="companyName"></span>
                        </div>
                      </div>
                    </div>
                    <!--通用按钮盒子-->
                    <div class="layui-col-md12" style="padding-top: 10px; padding-bottom: 10px">
                      <!--通用table表格-->
                      <div style="float: right" class="layui-btn-group paramBtn">
                        <button id="reloadDetection" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                          查询
                        </button>
                        <button id="resetDetection" type="reset" class="layui-btn layui-btn-sm layui-btn-danger">
                          重置
                        </button>
                      </div>
                    </div>
                  </form>
                  <table
                    class="layui-table"
                    lay-data="{ url:'${ctx}/supervise/productionBatch/productionBatchPage', page:true,groups:5,id:'demo1' }"
                    lay-filter="demo1"
                  >
                    <thead>
                      <tr>
                        <th lay-data="{field:'wCode'}">加工单号</th>
                        <th lay-data="{field:'enterpriseName',width:350}">生产企业</th>
                        <th lay-data="{field:'classifyName'}">产品类型</th>
                        <th lay-data="{field:'productName'}">产品名称</th>
                        <th lay-data="{field:'specifications',templet: '#titleTpl'}">规格/单位</th>
                        <th lay-data="{field:'batchCode'}">生产批次</th>
                        <th lay-data="{field:'worksheetDate'}">生产日期</th>
                        <th lay-data="{field:'right',toolbar:'#barDemo',width:100}">操作</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              </div>

              <div class="layui-tab-item">
                <div class="layui-col-md12 layui-col-space15">
                  <!--输入框内容盒子-->
                  <div class="layui-col-md12">
                    <!--输入框-->
                    <div class="layui-col-md12" style="margin-top: 5px">
                      <div class="layui-col-md4">
                        <div class="layui-input-block">
                          <input
                            type="text"
                            id="labelCode"
                            placeholder="请输入商品码"
                            autocomplete="off"
                            class="layui-input"
                          />
                        </div>
                      </div>
                    </div>
                  </div>

                  <!--通用按钮盒子-->
                  <div class="layui-col-md12" style="padding-top: 10px; padding-bottom: 10px">
                    <div style="float: right" class="layui-btn-group paramBtn">
                      <button onclick="searchCode();" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                        查询
                      </button>
                      <button onclick="resetProcess();" type="reset" class="layui-btn layui-btn-sm layui-btn-danger">
                        重置
                      </button>
                    </div>
                  </div>
                  <div id="infoData"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="flowRecord">流向信息</a>
    </script>
    <script type="text/html" id="titleTpl">
      {{d.specifications}} {{# if(d.unit != ''){ }} /{{d.unit}} {{# } }}
    </script>
  </body>
  <script>
    layui.use("element", function () {
      var element = layui.element;

      //一些事件监听
      element.on("tab(docDemoTabBrief)", function (data) {
        //console.log(this); //当前Tab标题所在的原始DOM元素
        //console.log(data.index); //得到当前Tab的所在下标
        //console.log(data.elem); //得到当前的Tab大容器
      });
    });

    var $ = layui.$;

    //根据企业联动产品信息
    function getProductData(id) {
      var requestData = { enterpriseId: id };
      var returnData = send("${ctx}/supervise/traceabilityQuery/queryAllProduct", requestData);
      layui.use(["jquery", "form"], function () {
        $("#selectProductName").empty();
        var option1 = $("<option>").val("").text("请选择产品");
        $("#selectProductName").append(option1);
        $.each(returnData, function (index, obj) {
          console.dir("加载ing");
          console.dir(obj);
          var option = $("<option>").val(obj.productId).text(obj.productName);
          $("#selectProductName").append(option);
        });
        //重新渲染表单
        layui.form.render();
      });
    }
    //发送请求
    function send(url, data) {
      var returnData = [];
      layui.use("jquery", function () {
        $.ajax({
          url: url,
          data: data, //请求的附加参数，用json对象
          method: "POST",
          async: false,
          success: function (res) {
            console.log("返回数据：" + JSON.stringify(data));
            returnData = res.data;
          },
          error: function () {
            console.log("返回数据:error");
          },
        });
      });
      return returnData;
    }

    // 初始化所有生产日期
    function initAllPurchaseDate() {
      var requestData = {};
      var returnData = send("${ctx}/flowQuery/findAllPurchaseDate", requestData);
      layui.use(["jquery", "form"], function () {
        $("#selectPDate").empty();
        var option1 = $("<option>").val("").text("请选择生产日期");
        $("#selectPDate").append(option1);
        $.each(returnData, function (index, obj) {
          var option = $("<option>").val(obj.p_date).text(obj.p_date);
          $("#selectPDate").append(option);
        });
        //重新渲染表单
        layui.form.render();
      });
    }

    layui.use(["tree", "layer", "table"], function () {
      var $ = layui.$;
      var loading = layer.msg("数据加载中...");
      var table1 = layui.table;
      table1.render({
        done: function () {
          layer.close(loading);
        },
      });

      // 页面加载时初始化产品名称下拉列表
      getProductData(null);
      // 页面加载时初始化生产日期下拉列表
      initAllPurchaseDate();
      //监听filter为demo的table中的工具条
      table1.on("tool(demo1)", function (obj) {
        var data = obj.data;
        if (obj.event == "flowRecord") {
          window.location.href =
            "${ctx}/flowQuery/toFlowInfo?batchId=" +
            data.batchId +
            "&proId=" +
            data.productId +
            "&worksheetDate=" +
            data.worksheetDate +
            "&worksheetId=" +
            (data.worksheetId || "");
        }
      });

      /**
       * 条件查询中的查询按钮
       * */
      $("#reloadDetection").on("click", function () {
        //这里以搜索为例
        table1.reload("demo1", {
          where: {
            //设定异步数据接口的额外参数，任意设
            productId: $("#selectProductName").val(),
            enterpriseId: $("#productionCompanyId").val(),
            batchId: $("#batchId").val(),
            worksheetDate: $("#selectPDate").val(),
          },
          page: {
            curr: 1, //重新从第 1 页开始
          },
        });
      });
      /**
       * 重置条件查询
       * */
      $("#resetDetection").on("click", function () {
        $("#productionCompanyId").val("");
        $("#companyName").html("");
        $("#batchCode").val("");
        $("#batchId").val("");

        $("#selectProductName").empty();
        var option1 = $("<option>").val("").text("请选择产品");
        $("#selectProductName").append(option1);

        $("#selectPDate").empty();
        var option1 = $("<option>").val("").text("请选择生产日期");
        $("#selectPDate").append(option1);
        //这里以搜索为例
        table1.reload("demo1", {
          where: {
            //设定异步数据接口的额外参数，任意设
            productId: "",
            enterpriseId: "",
            batchId: "",
            worksheetDate: "",
          },
          page: {
            curr: 1, //重新从第 1 页开始
          },
        });
      });

      /**
       * 点击生产企业按钮
       */
      $("#prodictionButton").on("click", function () {
        layer.open({
          type: 2,
          title: "生产企业",
          shadeClose: true,
          offset: "10px",
          shade: 0.8,
          area: ["50%", "80%"],
          content:
            "${ctx}/supervise/traceabilityQuery/queryEnterpriseAll?companyIds=" + $("#productionCompanyId").val(), //iframe的url
        });
      });
    });
    /*  溯源码查询 */
    function searchCode() {
      var loading = layer.msg("数据加载中...");
      layer.close(loading);
      var code = $("#labelCode").val();
      $("#infoData").load("${ctx }/flowQuery/findFlowInfo?labelCode=" + code);
    }
    /* 重置溯源查询 */
    function resetProcess() {
      $("#labelCode").val("");
      $("#infoData").empty();
    }
    /* 联想查询批次码 */
    function assBatch(obj) {
      var pId = $("#selectProductName").val();
      $(".batch-dl").show();
      $("#dlBatch").load("${ctx }/flowQuery/assBatch?batchCode=" + $(obj).val() + "&proId=" + pId);
    }
    /* 批次码点击事件 */
    function selectBatch(id, code, obj) {
      $(obj).addClass("layui-this");
      $(".batch-select")
        .not(obj)
        .each(function () {
          $(this).removeClass("layui-this");
        });
      $("#batchCode").val(code);
      $("#batchId").val(id);
      $(obj).parent().hide();
    }

    /* 清空批次选择 */
    function clearBatch(obj) {
      $(obj).addClass("layui-this");
      $(".batch-select")
        .not(obj)
        .each(function () {
          $(this).removeClass("layui-this");
        });
      $("#batchCode").val("");
      $("#batchId").val("");
      $(obj).parent().hide();
    }

    /* 点击选择按钮 */
    function findBatchCode() {
      layer.open({
        type: 2,
        title: "生产批次",
        shadeClose: true,
        offset: "10px",
        shade: 0.8,
        area: ["50%", "80%"],
        content: "${ctx}/flowQuery/toBatchList?proId=" + $("#selectProductName").val(), //iframe的url
      });
    }
    //根据批次联动生产日期
    function getPurchaseDate(id) {
      var requestData = { batchId: id };
      var returnData = send("${ctx}/flowQuery/findPurchaseDate", requestData);
      layui.use(["jquery", "form"], function () {
        $("#selectPDate").empty();
        var option1 = $("<option>").val("").text("请选择生产日期");
        $("#selectPDate").append(option1);
        $.each(returnData, function (index, obj) {
          console.dir("加载ing");
          console.dir(obj);
          var option = $("<option>").val(obj.p_date).text(obj.p_date);
          $("#selectPDate").append(option);
        });
        //重新渲染表单
        layui.form.render();
      });
    }
    function emptyDate() {
      $("#selectPDate").empty();
      var option1 = $("<option>").val("").text("请选择生产日期");
      $("#selectPDate").append(option1);
      layui.form.render();
    }

    function batchChange() {
      emptyDate();
    }

    layui.use("form", function () {
      var form = layui.form;
      //监听提交
      form.on("select(purNameChange)", function (data) {
        $("#batchCode").val("");
        $("#batchId").val("");
        // 重新加载所有生产日期，而不是清空
        initAllPurchaseDate();
      });
    });
  </script>
</html>
